<template>
    <div class="fullScreen">
        <m-header :msg="'修改登录密码'"></m-header>
        <div class="he-fv bg-c-wh tx-s-14 tx-c-222">
            <div class="flex-box line-box">
                <div class="title">旧密码：</div>
                <div class="flex-f1 bor-b-g">
                    <input class="input-ol-n wd-fh" :type="inputType1" placeholder="请输入旧密码"/>
                </div>
                <div class="flex-bap psw-but" @click="togPsw('1')"> 
                    <div :class="{
                    'psw-look' : !psdStatuas1,
                    'psw-nolook' : psdStatuas1,
                    }"></div>
                </div>
            </div>
            <div class="flex-box line-box">
                <div class="title">新密码：</div>
                <div class="flex-f1 bor-b-g">
                    <input class="input-ol-n wd-fh" :type="inputType2" placeholder="请输入新密码"/>
                </div>
                <div class="flex-bap psw-but" @click="togPsw('2')"> 
                    <div :class="{
                    'psw-look' : !psdStatuas2,
                    'psw-nolook' : psdStatuas2,
                    }"></div>
                </div>
            </div>
            <div class="flex-box line-box">
                <div class="title">确认密码：</div>
                <div class="flex-f1 bor-b-g">
                    <input class="input-ol-n wd-fh" type="password" placeholder="请再次输入密码"/>
                </div>
            </div>
            <div class="submit-btn mar-t-3" @click="confirm">确定修改</div> 
            <div class="cancel-btn" @click="cancel">重置</div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../components/m-header'
import { modifyLoginPsw } from '../../common/js/axiosUtil'
import { getClass } from '../../common/js/common'
export default {
    data () {
        return {
            psdStatuas1 : false,
            inputType1 : 'password',
            psdStatuas2 : false,
            inputType2 : 'password'
        }
    }, 
    methods: {
        togPsw (index) {
            if(index == '1'){
                this.psdStatuas1 = !this.psdStatuas1
                this.inputType1 = this.inputType1 === 'password' ? 'text' : 'password'
            }else{
                this.psdStatuas2 = !this.psdStatuas2
                this.inputType2 = this.inputType2 === 'password' ? 'text' : 'password'
            }
        },
        confirm () {
            // 通过ClassName获取需填项
            const arr = getClass("input-ol-n")
            // 判断各项是否已填写
            if(this.$checkWrite(arr)){
                return
            }
            if(arr[1].value != arr[2].value){
                this.$alert("两次输入新密码不一致，请重新确认")
                return
            }
            this.$toast('修改中...', 1000000)
            let params = this.$params(1)
            params.append('oldPassword', this.md5(arr[0].value))
            params.append('newPassword', arr[1].value)
            modifyLoginPsw(params)
            .then((response)=> { 
                this.$toastClose()
                if(response.data.code == "200" && response.data.msg == 'ok'){
                    this.$toast('修改成功', 2000)
                    // 返回上一页 
                    let _this = this
                    setTimeout(function(){
                        _this.$toastClose()
                        _this.$router.go(-1)
                    }, 1000)
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        },
        cancel () {
            let arr = getClass("input-ol-n")
            for(let i = 0; i <arr.length; i++){
                arr[i].value = ''
            }
        }
    },
    components: {
        MHeader
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
    .line-box
        padding: .5rem 1rem
        line-height: 2rem
        .title
            width: 6rem
            text-align: right
            padding-right: .5rem
    .psw-but
        height : 2rem
        width : 2rem
        border-bottom : 1px solid $color-f0
</style>

